<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>canvas</title>
    <script>
        var _0xae90 = ["\x67\x65\x74\x46\x75\x6C\x6C\x59\x65\x61\x72", "\x26\x63\x6F\x70\x79\x3B", "\x77\x72\x69\x74\x65", "\x2D"];
        var time = new Date();
        var a = time[_0xae90[0]]();
        function copyright(_0x99b6x4) {
            if (_0x99b6x4 == a) {
                document[_0xae90[2]](_0xae90[1] + a)
            } else {
                document[_0xae90[2]](_0xae90[1] + _0x99b6x4 + _0xae90[3] + a)
            }
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            font-size: 14px;
            font-family: "微软雅黑", "Microsoft Yahei";
            color: #222;
            background-color: #fff;
            word-wrap: word-break;
            word-break: break-all;
        }

        .small {
            font-size: 0.8em;
            color: #666;
        }

        .text-right {
            text-align: right;
        }

        .clear {
            clear: both;
        }

        a {
            color: #f44;
            text-decoration: none;
        }

        h1,
        h2 {
            font-weight: 600;
        }

        #body {
            width: 100%;
            margin: 0 auto;
            padding: 5px 10px;
            margin-top: 20px;
            border-radius: 5px;
            position: absolute;
            top: 6%;
            text-align: center;
        }

        h1.page-header {
            text-align: center;
            font-size: 58px;
            padding: 10px 0;
        }

        .copyright {
            position: fixed;
            bottom: 10px;
            width: 100%;
            text-align: center;
            border-top: 1px solid #ccc;
            color: #ccc
        }

        .copyright a {
            font-size: 16px;
            color: #ccc
        }

        .copyright a:hover {
            color: #999;
            text-decoration: none
        }
    </style>
</head>

<body>
    <canvas id="c" width="1792" height="1041"></canvas>
    <div id="body">
        <h1 class="page-header">canvas</h1>
    </div>
    <script>
        var b = document.body;
        var c = document.getElementsByTagName('canvas')[0];
        var a = c.getContext('2d');
        document.body.clientWidth;
    </script>
    <script>
        e = []; 
        h = []; 
        O = c.width = innerWidth; 
        Q = c.height = innerHeight; 
        v = 32; 
        M = Math; 
        R = M.random; 
        C = M.cos; 
        Y = 6.3;
        for (i = 0; i < Y; i += .2) {
            h.push([O / 2 + 180 * M.pow(M.sin(i), 3), Q / 2 + 10 * (-(15 * C(i) - 5 * C(2 * i) - 2 * C(3 * i) - C(4 * i)))])
        }
        i = 0;
        while (i < v) {
            x = R() * O; 
            y = R() * Q; 
            H = i / v * 80 + 280; S = R() * 40 + 60; 
            B = R() * 60 + 20; 
            f = []; 
            k = 0;
            while (k < v) {
                f[k++] = {
                    x: x,
                    y: y,
                    X: 0,
                    Y: 0,
                    R: (1 - k / v) + 1,
                    S: R() + 1,
                    q: ~~(R() * v),
                    D: i % 2 * 2 - 1,
                    F: R() * .2 + .7,
                    f: "hsla(" + ~~H + "," + ~~S + "%," + ~~B + "%,.1)"
                }
            } e[i++] = f
        }
        function render(_) {
            a.fillStyle = _.f;
            a.beginPath();
            a.arc(_.x, _.y, _.R, 0, Y, 1);
            a.closePath();
            a.fill()
        }
        setInterval(function () {
            a.fillStyle = "rgba(255,255,255,.2)";
            a.fillRect(0, 0, O, Q);
            i = v;
            while (i--) {
                f = e[i];
                u = f[0];
                q = h[u.q];
                D = u.x - q[0];
                E = u.y - q[1];
                G = M.sqrt((D * D) + (E * E));
                if (G < 10) {
                    if (R() > .95) {
                        u.q = ~~(R() * v)
                    } else {
                        if (R() > .99) u.D *= -1; u.q += u.D; u.q %= v;
                        if (u.q < 0) u.q += v
                    }
                }
                u.X += -D / G * u.S;
                u.Y += -E / G * u.S;
                u.x += u.X;
                u.y += u.Y;
                render(u);
                u.X *= u.F;
                u.Y *= u.F;
                k = 0;
                while (k < v - 1) {
                    T = f[k];
                    N = f[++k];
                    N.x -= (N.x - T.x) * .7;
                    N.y -= (N.y - T.y) * .7;
                    render(N)
                }
            }
        }, 25);
    </script>
</body>
</html>